<template>
  <div>
    <nav-top class="navtop">{{ data.title }}</nav-top>
    <!-- 内容 -->
    <!-- 信息 -->
    <div class="infoB">
      <div class="info">
        <div class="imgs">
          <img :src="data.cover | imgUrl" alt="" />
        </div>
        <div class="text">
          <h3>{{ data.title }}</h3>
          <li>
            <span>{{ data.author }}</span
            ><em>LV.5</em>
          </li>
          <li>{{ rating.score }}分/{{ rating.tip }}</li>
          <li>{{ data.majorCate }}/{{ data.minorCate }}</li>
          <li>{{ data.wordCount | count }}万字<em>|</em>连载</li>
        </div>
      </div>
      <div class="infoBtn">
        <li @click="gotoReader('reader', { id: data._id })">免费阅读</li>
        <li @click="setShelf(isShelf)" :class="{ active: isShelf }">
          {{ isShelf ? "已在书架" : "加入书架" }}
        </li>
        <!-- <li>VIP订阅</li> -->
      </div>
      <div class="downloadB">
        <h3>下载APP</h3>
        <h4>新人免费读，天天领福利</h4>
      </div>
    </div>
    <!-- 简介 -->
    <div class="brief" @click.once="openB = true">
      <p :class="{ show: openB }">
        {{ data.longIntro }}
      </p>
      <span class="iconfont icon-arrow-down" v-if="!openB"></span>
    </div>
    <!-- 目录 -->
    <div
      class="catalogue"
      @click="gotoReader('reader', { id: data._id, openCata: true })"
    >
      <h3>目录</h3>
      <div>{{ data.updated | time }}<em>·</em>{{ data.lastChapter }}</div>
      <span class="iconfont icon-arrow-right-"></span>
    </div>
    <!-- 月票打赏 -->
    <div class="play">
      <li>
        <span class="iconfont icon-yuepiao"></span>
        <p>投月票</p>
        <p>671票<em>·</em>第482位</p>
      </li>
      <li>
        <span class="iconfont icon-tuijianpiao-lianzuo-zhong"></span>
        <p>投月票</p>
        <p>671票<em>·</em>第482位</p>
      </li>
      <li>
        <span class="iconfont icon-dashang"></span>
        <p>投月票</p>
        <p>671票<em>·</em>第482位</p>
      </li>
    </div>
    <!-- 本书作者 -->
    <div class="author">
      <h3>本书作者</h3>
      <div class="in" @click="toRouter('author', { author: data.author })">
        <div class="imgs">
          <img src="../assets/images/ergeng.png" alt="" />
          <em>Lv.5</em>
        </div>
        <div class="text">
          <h3>{{ data.author }}</h3>
          <p>暂无作者简介</p>
        </div>
        <span class="iconfont icon-arrow-right-"></span>
      </div>
    </div>

    <van-overlay :show="overlay" z-index="99">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getBookinfo } from "../api/book/all.js";
export default {
  data() {
    return {
      show: false,
      openB: false, // 简介展开
      data: {},
      rating: {},
      overlay: true,
      isShelf: false, // 是否存在书架 t存在 f不存在
    };
  },
  methods: {
    toRouter(path, params) {
      this.$router.push({
        path: `/${path}`,
        query: { ...params },
      });
    },
    gotoReader(path, params) {
      let lately = this.$store.state.lately;
      let temp = lately.find((item) => item._id == params.id);
      // 查找是否读过 读到第几章
      let order = temp ? temp.order : 1;
      this.$router.push({
        path: `/${path}`,
        query: { ...params, order: order },
      });
      // console.log(path,params)
      // 加入到最近阅读
      this.$store.commit("setLately", this.data);
    },
    getData() {
      getBookinfo(this.$route.query.id).then((data) => {
        this.data = data;
        this.rating = data.rating;
        this.overlay = false;
        document.title = this.data.title + "-张四发旗下网站";
        // console.log(this.data);

        // 查询当前书籍是否在书架中 控制isShelf变量 未写完 2021-5-22 下午
        let shelf = this.$store.state.shelf;
        this.isShelf = shelf.some((item) => {
          if (item._id == this.data._id) {
            return true;
          }
        });
      });
    },
    setShelf(flag) {
      // 设置是否加入书架 flag为true是存在书架的 false是不存在书架的
      if (flag) {
        // 删除当前书籍在书架的数据
        this.$store.commit("delShelf", [this.data]);
      } else {
        // 先查看最近阅读有没有记录到本书 有就用最近阅读的数据加入书架
        let lately = this.$store.state.lately;
        let da = lately.find((item) => item._id == this.data._id) || this.data;
        this.$store.commit("setShelf", da);
        this.isShelf = true;
      }
      this.isShelf = !flag; // 重新定义当前书籍在书架的状态变量
    },
  },
  created() {
    this.getData();
  },
  filters: {
    imgUrl(url) {
      if (url) {
        return "http://statics.zhuishushenqi.com" + url;
      } else {
        return "";
      }
    },
    time(date) {
      let time =
        new Date().getTime() - new Date((date || "").split(".")[0]).getTime();
      let hour = parseInt(time / 1000 / 60 / 60);
      let day = hour >= 24 ? parseInt(hour / 24) : 0;
      let year = day >= 365 ? parseInt(day / 365) : 0;
      let min = parseInt(time / 1000 / 60);
      let str =
        year != 0
          ? year + "年前"
          : day != 0
          ? day + "天前"
          : hour != 0
          ? hour + "小时前"
          : min != 0
          ? min + "分钟前"
          : "刚刚";
      return str;
    },
    count(num) {
      let w = (num / 10000).toFixed(2);
      return w;
    },
  },
};
</script>
<style lang="less" scoped>
.navtop{
  width: 100%;
  position: absolute;
}
// 内容
.infoB {
  padding: 1.2rem 0.46875rem 0;
  border-bottom: 2px solid #9999991c;
  background-color: white;
  background: linear-gradient(
      to right,
      #fff,
      rgba(219, 219, 219, 43%),
      #fff,
      rgba(189, 178, 178, 13%) 10rem
    ),
    linear-gradient(
        to top right,
        rgba(219, 219, 219, 43%),
        #fff,
        rgba(189, 178, 178, 13%) 10rem,
        #fff
      )
      no-repeat center bottom;
  font-size: 0.328125rem;
  .info {
    display: flex;
    padding: 0.3125rem 0;
    .imgs {
      width: 2.28125rem;
      img {
        width: 100%;
        height: auto;
      }
    }
    .text {
      flex: 1;
      padding: 0.078125rem 0.234375rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        letter-spacing: 0.046875rem;
      }
      li {
        &:nth-child(2) {
          em {
            background-color: #f0643a;
            color: white;
            padding: 0.078125rem;
            display: inline-block;
            transform: scale(0.63);
            font-style: normal;
            vertical-align: middle;
            border-radius: 2px;
          }
        }
        &:nth-child(3) {
          color: #aaa;
        }
        &:nth-child(5) {
          em {
            margin: 0 0.125rem;
            display: inline-block;
            vertical-align: top;
          }
        }
      }
    }
  }
  .infoBtn {
    margin-top: 0.15625rem;
    display: flex;
    justify-content: space-between;
    li {
      width: 46%;
      padding: 0.155rem 0;
      font-size: 0.359375rem;
      background-color: white;
      text-align: center;
      box-shadow: inset 1px 0 #e3e4e6, inset 0 1px #e3e4e6, inset 0 -1px #e3e4e6,
        inset -1px 0 #e3e4e6;
      border-radius: 0.078125rem;
      &.active {
        color: #aaa;
        background-color: #f2f2f2;
      }
      &:active {
        background-color: #f2f2f2;
      }
    }
  }
  .downloadB {
    text-align: center;
    color: white;
    background-color: #ed424b;
    padding: 0.140625rem 0;
    line-height: 0.615625rem;
    margin: 0.46875rem 0;
    border-radius: 0.078125rem;
  }
}
.brief {
  padding: 0.390625rem 0.46875rem;
  border-bottom: 2px solid #9999991c;
  background-color: white;
  position: relative;
  p {
    font-size: 0.359375rem;
    text-indent: 1em;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    text-align: justify;
    padding-bottom: 0.3125rem;
    height: 2.1rem;
    overflow: hidden;
    &.show {
      height: auto;
    }
  }
  span {
    position: absolute;
    background-color: white;
    font-size: 0.46875rem;
    right: 0.46875rem;
    top: 2.3rem;
    padding: 0.046875rem;
    box-shadow: -4px 0px 12px 4px white;
  }
}
.catalogue {
  padding: 0 0.46875rem;
  height: 1.125rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    width: 3rem;
    font-size: 0.46875rem;
  }
  div {
    flex: 1;
    font-size: 0.34375rem;
    white-space: nowrap;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aaa;
    em {
      margin: 0 0.078125rem;
      font-weight: bolder;
    }
  }
  span {
    width: 0.4rem;
    color: #aaa;
  }
}
.play {
  background-color: white;
  margin: 0.46875rem 0;
  display: flex;
  padding: 0.390625rem 0 0.3125rem;
  li {
    flex: 1;
    text-align: center;
    p {
      font-size: 0.3125rem;
      &:nth-child(3) {
        color: #aaa;
        em {
          font-weight: bolder;
          margin: 0 0.078125rem;
        }
      }
    }
    span {
      width: 0.99rem;
      height: 0.7rem;
      display: block;
      margin: 0 auto 0.15625rem;
      line-height: 0.7rem;
      font-size: 1.015625rem;
      color: #ed424b;
    }
    &:nth-child(3) {
      span {
        font-size: 0.78125rem;
      }
    }
  }
}
.author {
  background-color: white;
  & > h3 {
    font-size: 0.390625rem;
    padding: 0.3125rem 0.46875rem;
    border-bottom: 2px solid #9999991c;
  }
  .in {
    display: flex;
    padding: 0 0.46875rem;
    height: 2.28125rem;
    align-items: center;
    &:active {
      background-color: #f2f2f2;
    }
    .imgs {
      width: 1.35rem;
      position: relative;
      img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        vertical-align: top;
      }
      em {
        font-size: 0.3125rem;
        background-color: #f0643a;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        color: white;
        width: 1rem;
        text-align: center;
        height: 0.46875rem;
        line-height: 0.46875rem;
        border-radius: 0.46875rem;
        box-shadow: inset 0 0 1px 1px white;
      }
    }
    .text {
      flex: 1;
      font-size: 0.390625rem;
      padding-left: 0.15625rem;
      p {
        color: #aaa;
      }
    }
    span {
      width: 0.4rem;
      color: #aaa;
      font-size: 0.5625rem;
    }
  }
}
</style>